<script setup lang="ts">
import { ref } from "vue";
const props = defineProps({
  msg: {
    type: String,
    default: ""
  },
  msgType: {
    type: String,
    default: "default"
  }
});
</script>

<template>
  <Teleport to="body">
    <div
      class="mask"
      w:w="screen"
      w:h="screen"
      w:pos="fixed top-0 left-0"
      w:flex="~ row nowrap"
      w:align="items-center"
      w:justify="center"
      w:text="xl"
    >
      <div
        class="wrapper"
        :class="['bg-' + msgType]"
        w:p="x-4 y-2"
        w:border="rounded-md"
      >
        {{ props.msg }}
      </div>
    </div>
  </Teleport>
</template>

<style lang="scss" scoped>
.bg-default {
  background-color: #585858;
  color: #fff;
}
.bg-success {
  background-color: #dbf1e1;
  color: #19be6b;
}
.bg-warning {
  background-color: #fdf6ec;
  color: #ff9900;
}
.bg-error {
  background-color: #fef0f0;
  color: #fa3534;
}
.bg-info {
  background-color: #f4f4f5;
  color: #909399;
}
</style>
